// 添加题库
<template>
  <div class="add">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>试题管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加试题</el-breadcrumb-item>
    </el-breadcrumb>
<!--    表单部分-->
    <el-form :inline="true" :model="addForm"  ref="addFormRef" :rules="addFormRules" height="468">
        <!-- 头部表单下拉框-->
       <el-form-item label="试题类型: ">
      <el-select  placeholder="选择" v-model="value">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
                   :disabled="item.disabled">
        </el-option>
      </el-select>
      </el-form-item>
    </el-form>
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" >
      </el-form-item>
      <el-form-item label="专业代码" prop="pro_maj">
        <el-input type="number" placeholder="如:计算机科目代码为408" v-model="addForm.pro_maj"></el-input>
      </el-form-item>
      <el-form-item label="章节标题"  prop="cha_title">
        <el-input   placeholder="请输入" v-model="addForm.cha_title" ></el-input>
      </el-form-item>
      <el-form-item label="试题分数" prop="cha_no">
        <el-input type="number" placeholder="请输入本题分数" v-model="addForm.cha_no"></el-input>
      </el-form-item>
      <el-form-item label="难度系数" prop="pro_dif">
        <el-input type="number"  placeholder="请输入1-5" v-model="addForm.pro_dif" ></el-input>
      </el-form-item>


            <!--试题内容-->
            <el-form-item  label="试题主体"  prop="pro_detail">
             <el-tag>题目内容:【输入题目主干，例如：什么是Spingboot?】</el-tag>
              <el-input placeholder="请输入你想出的题目..." type="textarea" rows="4" v-model="addForm.pro_detail"></el-input>
           </el-form-item>

           <!--试题答案编号-->
          <el-form-item label="答案编号" prop="pro_ansno">
            <el-input type="number" v-model="addForm.pro_ansno"></el-input>
          </el-form-item>


           <!--答案解析-->
          <el-form-item  label="参考答案" prop="cha_mpoint">
          <el-tag>详细解析:【输入该题目的详细解析，别人一看就懂的那种】</el-tag>
             <el-input placeholder="请输入你的详细解析..." type="textarea" rows="4" v-model="addForm.cha_mpoint"></el-input>
          </el-form-item>
        </el-form>

            <!-- 内容底部区域 -->
           <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="resetaddForm">重置</el-button>
            <el-button type="primary" @click="addProblem">确 定</el-button>
           </span>
        </div>
    </template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项2',
        label: '选择题',
        disabled: true
      }, {
        value: '选项3',
        label: '判断题',
        disabled: true
      }],
      value: '主观题', //题型选中值
      //获取表单数据
      addForm:  {
          pro_detail:'',
          pro_keyw:'',
          pro_dif:'',
          cha_no:'',
          cha_title:'',
          cha_mpoint:'',
          pro_maj:'',
          pro_ansno:'',
    },

    //提示框
    addFormRules:{
          pro_detail:[
        {required: true, message: "请输入正确的题目！", trigger: "blur"},
        {min: 1, max: 1000, message: "内容不能为空！", trigger: "blur"}
      ],
          pro_ansno:[
        {required: true, message: "请输入唯一答案标识", trigger: "blur"},
        {min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur"}
      ],
          pro_maj:[
        {required: true, message: "请输入试卷所属专业代码", trigger: "blur"},
        {min: 2, max: 15, message: "请输入数字编号", trigger: "blur"}
      ],
          cha_mpoint:[
        {required: true, message: "请输入试题解答过程", trigger: "blur"},
        {min: 5, max: 1000, message: "不少于5个字符", trigger: "blur"}
      ],
          cha_no:[
        {required: true, message: "请输入试题分数", trigger: "blur"},
        {min: 1, max: 15, message: "填数字且不少于2个字符", trigger: "blur"}
      ],
          cha_title:[
        {required: true, message: "请输入章节标题", trigger: "blur"},
        {min: 2, max: 15, message: "请输入正确章节标题", trigger: "blur"}
      ],
          pro_dif:[
        {required: true, message: "请输入数字", trigger: "blur"},
        {min: 1, max: 15, message: "等级在1~5之间", trigger: "blur"}
      ],
    },
    };
  },


  methods: {
    //
    resetaddForm(){
      this.$refs.addFormRef.resetFields();// 重置表单项
    },
    addProblem(){
      this.$refs.addFormRef.validate(async valid =>{
        console.log(valid);
        if( !valid ) return;
        // 发起请求
        const {data:res} = await this.$http.post("addProblem",this.addForm);
        if (res != "success") {
          return this.$message.error("操作失败！！！");
        }
        this.$message.success("操作成功！！！");
        //隐藏
        this.addDialogVisible = false;
        this.getProblemList();
      })
    },
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb{
  margin-bottom: 15px;
  font-size: 17px;
}
.add {
  margin: 0px 40px;
  .box {
    padding: 0px 20px;
  }
}
</style>


